<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 权限列表卡片 -->

    <el-card class="box-card">
      <!-- 权限表格 -->
      <template>
        <el-table :data="RightList" border style="width: 100%">
          <el-table-column type="index" label="#" width="60"> </el-table-column>
          <el-table-column prop="authName" label="权限名称" width="180">
          </el-table-column>
          <el-table-column prop="path" label="路径" width="180">
          </el-table-column>
          <el-table-column label="权限等级">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.level == 0">一级</el-tag>
              <el-tag v-else-if="scope.row.level == 1" type="success">二级</el-tag>
              <el-tag v-else type="warning">三级</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pagenum"
        :page-sizes="[5, 6, 8, 10]"
        :page-size="pagination.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import newList from "@/until/dataPagination.js";
export default {
  data() {
    return {
      RightList: [],
      pagination: {
        total: 10,
        pagenum: 1,
        pagesize: 10,
      },
    };
  },
  mounted() {
    this.getRightList();
  },
  methods: {
    //获取权限列表数据
    async getRightList() {
      const { data: res } = await this.$axios.get("rights/list");
      this.pagination.total = res.data.length;
      const newData = newList(res.data, this.pagination);
      console.log(newData);
      this.RightList = newData;
      // console.log(res);
    },

    // 当前页码改变
    handleSizeChange(newpagesize) {
      this.pagination.pagesize = newpagesize;
      this.getRightList();
    },

    // 当前页数改变
    handleCurrentChange(newpagenum) {
      this.pagination.pagenum = newpagenum;
      this.getRightList();
      console.log(newpagenum);
    },
  },
};
</script>

<style module></style>
